<html lang="en"><head>
    <meta charset="UTF-8">

    <meta name="apple-mobile-web-app-title" content="CodePen">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>https://codepen.io/ispal/pen/LxjgEj</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./jquery.mCustomScrollbar.min.css">
</head>
<body translate="no">
<!--

Follow me on
Dribbble: https://dribbble.com/supahfunk
Twitter: https://twitter.com/supahfunk
Codepen: https://codepen.io/supah/

It's just a concept, a fake chat to design a new daily UI for direct messaging.
Hope you like it :)

-->

<div class="chat">
    <div class="chat-title">
        <h1>Fabio Ottaviani</h1>
        <h2>Supah</h2>
        <figure class="avatar">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/156381/profile/profile-80.jpg" /></figure>
    </div>
    <div class="messages">
        <div class="messages-content"></div>
    </div>
    <div class="message-box">
        <textarea type="text" class="message-input" placeholder="Type message..."></textarea>
        <button type="submit" class="message-submit">Send</button>
    </div>

</div>
<div class="bg"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.3/jquery.mCustomScrollbar.concat.min.js"></script>


</body>
<script src="script.js"></script>
</html>